var myApp = {
    getDom: (function () {
        var progress = document.querySelector(".progress>span");
        //所有的圆形
        var circle = document.querySelectorAll(".circle");
        //下一个
        var next = document.querySelector(".next");
        //上一个
        var prev = document.querySelector(".prev");
        return {
            progress: progress,
            circle: circle,
            next: next,
            prev: prev
        }
    })(),

    methods: {
        add: function () {
            var progress = myApp.getDom.progress;
            var circle = myApp.getDom.circle;
            var next = myApp.getDom.next;
            var prev = myApp.getDom.prev;
            var current = 0;
            //按钮点击的时候给圆形循环添加active类名
            next.onclick = function () {
                prev.removeAttribute("disabled");
                current++;
                circle[current].classList.add("active");
                progress.style.width = (100 / 3) * current + "%";
                //对current进行判断
                if (current == circle.length - 1) {
                    this.setAttribute("disabled", "true");
                }
            }

            prev.onclick = function () {
                circle[current].classList.remove("active");
                current--;
                progress.style.width = (100 / 3) * current + "%";
                next.removeAttribute("disabled");
                if (current == 0) {
                    this.setAttribute("disabled", "true");
                }
            }
        }
    }
}

myApp.methods.add();